<template>
	<view class="index">
		<view class="supplier-wrapper">
			<view class="user-info">
				<view class="name">
					{{ params.supplierName }}
				</view>
				<uni-icons v-if="params.serviceTel" type="phone" size="18" color="#666"></uni-icons>
				<view class="tel" @click.stop="callPhone(params.serviceTel)">
					{{ params.serviceTel }}
				</view>
			</view>
			<view class="region">
				{{ params.businessAddress }}
			</view>
		</view>
		<view class="item-wrapper" v-for="(item,index) in list" :key="index">
			<view class="info-wrapper" :class="{'border': item.rejectList && item.rejectList.length}">
				<view class="title-wrapper">
					<text class="title">{{ item.productName }}</text>
					<uni-icons type="right" color="#898989" size="18"></uni-icons>
				</view>
				<view class="product-info">
					<view class="item">
						订货：{{ item.orderQuantity }}件
					</view>
					<view class="item">
						已交：{{ item.deliveryQuantity }}件
					</view>
					<view class="item item-bottom" :class="{'warning':item.pendingQuantity>0}">
						{{ dateStr }}：{{ item.pendingQuantity }}件
					</view>
				</view>
			</view>
			<view v-if="item.rejectList" class="testing-wrapper" v-for="(items,indexs) in item.rejectList" :key="indexs"
				@click="goTestingDetail(items)">
				<view class="date">
					质检：{{ items.rejectTime.substring(0,16) }}
				</view>
				<view v-if="items.rejectType === 'PART'" class="number">
					被拒收：{{ items.rejectQuantity }}件
				</view>
				<view v-else class="number">
					全部拒收
				</view>
				<uni-icons type="right" size="18" color="#898989"></uni-icons>
			</view>
		</view>

		<view class="submit-wrapper"> <!-- && showPrint -->
			<view v-if="showPrint && params.status > 0 && type == '0'" @click="remind" class="btn default">
				提醒交货
			</view>
			<view v-if="showPrint && params.status > 0 && type == '0'" class="btn" @click.stop="print">
				打印供货单
			</view>
			<view v-if="params.status === 0 && type == '0'" class="btn disabled" @click.stop="empty">
				结单后才能打印
			</view>
			<view v-if="history || type == '1'" class="btn default" @click="goTesting">
				质检记录
			</view>
			<view v-if="history || type == '1'" class="btn" @click="goReceipt">
				交货记录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				params: {},
				type: '',
				dateStr: '待交货'
			}
		},
		onLoad(option) {
			this.params = JSON.parse(option.params);
			this.type = option.type;
			if (new Date(this.params.supplyDate).getTime() < new Date(this.$helper.getDay(0, '-')).getTime()) {
				this.dateStr = "缺货"
			}

			this.getList()
		},
		computed: {
			supplyWarehouseInfo() {
				return this.$store.state.userInfo.supplyWarehouseInfo
			},
			//截单时间
			deadlineOrders() {
				return this.supplyWarehouseInfo.deadlineOrders.split(":")[0]
			},
			//开市时间
			openingTime() {
				return this.supplyWarehouseInfo.openingTime.split(":")[0]
			},
			//截止交货时间
			deadlineReceiving() {
				return this.supplyWarehouseInfo.deadlineReceiving.split(":")[0]
			},
			printDisabled() {
				const nowTime = new Date().getHours();
				const tomorrow = this.$helper.getDay(1, '-')
				const today = this.$helper.getDay(0, '-')
				const supplyDate = this.params.supplyDate.substring(0, 10)
				if (supplyDate === today) {
					return nowTime < this.deadlineOrders;
				} else if (supplyDate === tomorrow) {
					return true
				} else {
					return false
				}
			},
			showPrint() {
				const nowTime = new Date().getHours();
				const today = this.$helper.getDay(0, '-')
				const tomorrow = this.$helper.getDay(1, '-')
				const supplyDate = this.params.supplyDate.substring(0, 10)
				if (supplyDate === today) { //如果选中今天
					return nowTime >= this.deadlineOrders;
				} else {
					return false;
				}
			},
			history() {
				const today = this.$helper.getDay(0, '-')
				const tomorrow = this.$helper.getDay(1, '-')
				const supplyDate = this.params.supplyDate.substring(0, 10)
				return supplyDate !== today && supplyDate !== tomorrow
			}
		},
		methods: {
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			async remind() {
				if (!this.params.serviceTel) {
					uni.showToast({
						title: '暂未设置电话'
					})
					return
				}
				this.$showModal({
					title: '提示',
					content: '是否要提醒供应商交货？',
					confirmText: '确定',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const obj = this.supplyWarehouseInfo.schemaList.find(item => item.caption ===
								this.params
								.schemaCaption)
							//schemaCaption
							const data = await this.$api.post('/adm/supply/order/delivery-reminder', {
								reminderInfos: [{
									"mobile": this.params.serviceTel,
									"quantity": this.params.pendingQuantity,
									"endTime": obj.stopReceiveTime || '18:00'
								}]
							}, false)
							if (data.code === 200) {
								uni.showToast({
									title: '已提醒'
								})
							}
						}
					}
				})
			},
			async getList() {
				let url = "/adm/supply/order/pendingProductList";
				if (this.type == '1') {
					url = "/adm/supply/order/deliveryProductList";
				}
				const data = await this.$api.post(url, {
					supplyOrderId: this.params.id
					//supplierId: this.params.supplierId,
					//supplyDate: this.params.supplyDate.substring(0, 10)
				})
				if (data.code === 200) {
					this.list = data.data;
				}
				console.log(data.data)
			},
			empty() {},
			print() {
				this.$showModal({
					title: '打印确认',
					content: '是否要打印交货单？',
					confirmText: '打印',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							this.printConfirm()
						}
					}
				})
			},
			async printConfirm() {
				const data = await this.$api.post('/adm/supply/record/print', {
					supplyOrderId: this.params.id
				})
				if (data.code === 200) {
					this.donePrint(data.data)
				}
			},
			donePrint(item) {
				const data = item[0];
				const list = [{
						type: 0,
						text: "供货单",
						size: 32,
						align: 1,
						bold: true,
					}, {
						type: 4,
						height: 25
					}, {
						type: 0,
						text: "供货日期：" + data.supplyDate,
						size: 28,
						bold: true
					}, {
						type: 4,
						height: 10
					},
					{
						type: 0,
						text: "供应商：" + data.supplierName,
						size: 28,
						bold: true
					}, {
						type: 4,
						height: 20
					}, {
						type: 0,
						text: `交货流程：`,
						size: 30,
						bold: true,
					},
					{
						type: 4,
						height: 5
					},
					{
						type: 0,
						text: `1、交货：按照下面提示，前往各停车位进行交货，并由装车工盖章确认`,
						size: 24,
						bold: true
					},
					{
						type: 4,
						height: 5
					}, {
						type: 0,
						text: `2、回单：完成所有交货以后，携带本单据，前往出口处扫码回单。`,
						size: 24,
						bold: true
					}, {
						type: 4,
						height: 30
					},
					{
						type: 0,
						text: "切记：不回单，等于没有交货！！！！",
						size: 28,
						bold: true,
					},
					{
						type: 0,
						text: `共 ${item.length} 个交货单`,
						size: 24,
						bold: true
					},
					{
						type: 0,
						text: `${data.printTime}`,
						size: 24,
						bold: true
					},
					{
						type: 0,
						text: `第${data.printTimes }次打印`,
						size: 24,
						bold: true
					},
					{
						type: 4,
						height: 50
					}
				]
				for (var i = 0; i < item.length; i++) {
					list.push({
						type: 2
					}, {
						type: 4,
						height: 40
					}, {
						type: 0,
						text: `交货单编号：${item[i].code}`,
						size: 24,
						bold: true
					}, {
						type: 4,
						height: 15
					}, {
						type: 0,
						text: `城市仓：${item[i].pickupPointCode}${item[i].cityName}.${item[i].pickupPointName}`,
						size: 24,
						bold: true
					})
					item[i].vehicleList.forEach((row, index) => {
						let text = `停车位：${row.parkingSpace}  ${row.vehicleCode}`;
						let height = 15;
						if (index > 0) {
							text = `       ${row.parkingSpace}  ${row.vehicleCode}`;
							height = 8;
						}
						list.push({
							type: 4,
							height: height
						}, {
							type: 0,
							text: text,
							size: 24,
							bold: true
						})
					})
					list.push({
						type: 4,
						height: 25
					}, {
						type: 3
					})
					item[i].productList.forEach((row, index) => {
						list.push({
							type: 4,
							height: 25
						}, {
							type: 0,
							text: `${index+1}、${row.productName}`,
							size: 22,
							bold: true
						}, {
							type: 4,
							height: 15
						}, {
							type: 0,
							text: `货号：${row.productCode}`,
							size: 26,
							bold: true
						}, {
							type: 4,
							height: 15
						}, {
							type: 0,
							text: `客户订货：${row.quantity}件`,
							size: 26,
							bold: true
						}, {
							type: 4,
							height: 15
						}, {
							type: 0,
							text: `实际交货：               件`,
							size: 26,
							bold: true
						}, {
							type: 4,
							height: 25
						}, {
							type: 3
						})
					})
					let code = {
						type: 1,
						code: data.id
					}

					list.push({
						type: 4,
						height: 25
					}, {
						type: 0,
						text: `装车确认：`,
						size: 26,
						bold: true
					}, {
						type: 4,
						height: 60
					}, {
						type: 6,
						size: 8,
						text: JSON.stringify(code),
						align: 1
					}, {
						type: 4,
						height: 40
					})
				}

				list.push({
					type: 4,
					height: 100
				})
				this.$printFn(list, 2)
			},
			goTesting() {
				uni.navigateTo({
					url: '/subPage_testing/index?keywrods=' + this.params.supplierName + "&supplyDate=" + this
						.params.supplyDate.substring(0, 10)
				})
			},
			goReceipt() {
				uni.navigateTo({
					url: '/subPage_receiptOrder/index?keywrods=' + this.params.supplierName + "&supplyDate=" + this
						.params.supplyDate.substring(0, 10)
				})
			},
			goTestingDetail(item) {
				uni.navigateTo({
					url: '/subPage_testing/testingDetail?id=' + item.id
				})
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding-bottom: 140upx;

		.supplier-wrapper {
			background-color: #ffffff;
			padding: 20upx 20upx 10upx 20upx;
			margin-top: 1upx;

			.user-info {
				display: flex;
				align-items: center;
				font-size: 32upx;
				padding: 0 20upx;

				.name {
					font-weight: bold;
					flex: 1;
					color: #222222;
					font-size: 36upx;
				}

				.tel {
					color: #666;
				}

				.icon {
					margin-right: 5upx;
				}
			}

			.region {
				padding: 0 20upx;
				color: #888888;
				margin-top: 10upx;
			}
		}

		.item-wrapper {
			background-color: #ffffff;
			border-radius: 10upx;
			padding: 20upx 20upx 10upx 20upx;
			margin: 20upx 20upx 0 20upx;

			.info-wrapper {
				margin: 20upx;

				&.border {
					border-bottom: 1upx dashed #dedede;
					padding-bottom: 20upx;
				}

				.title-wrapper {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						font-size: 34upx;
						font-weight: bold;
						line-height: 38upx;
						color: #313131;
					}
				}

				.product-info {
					display: flex;
					align-items: center;
					margin-top: 20upx;
					justify-content: space-between;

					.item {
						&.item-bottom {
							font-weight: bold;
						}

						&.warning {
							color: #f90;
						}
					}
				}

				.btn-wrapper {
					border-top: 1upx dashed #efefef;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-top: 20upx;
					margin-top: 20upx;

					.date {
						flex: 1;
						font-size: 24upx;
						color: #666;
					}

					.btn {
						padding: 14upx 30upx;
						background-color: #ffffff;
						border: 1upx solid #bababa;
						border-radius: 10upx;
						font-size: 28upx;
						margin-left: 15upx;

						&.primary {
							color: #ffffff;
							background-color: #555BFF;
							border-color: #555BFF;
						}
					}
				}
			}

			.testing-wrapper {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #666;
				padding: 0 20upx;
				margin-bottom: 10upx;

				.date {
					flex: 1;
				}
			}
		}

		.submit-wrapper {
			position: fixed;
			height: 100upx;
			width: 100%;
			bottom: 0;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			z-index: 1;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				height: 100%;
				background-color: #555BFF;
				color: #ffffff;

				&.default {
					color: #232323;
					background-color: #ffffff;
				}

				&.disabled {
					color: #ffffff;
					background-color: #aaaaaa;
					border-color: #aaaaaa;
				}
			}
		}
	}
</style>